<script lang="ts" setup>
    import {onMounted, ref, reactive, watch} from 'vue'
    import { IconInfoCircle, IconCaretDown } from '@arco-design/web-vue/es/icon';
    import API from '@/services';
    import ModelListLi from '../modelListLi/index.vue'
    import draggable from 'vuedraggable';
    import { useRouter, useRoute} from 'vue-router';
    import { store } from '@/store';
    import Bus from '@/utils/emmit'
    import { Message } from '@arco-design/web-vue';
    const route = useRoute();
    let id = ref(route.query.id);
    let status = ref<any>(route.query.status);
    // 数据模型的下拉数据
    const modelOptions :any = ref()
    const modelValue = ref()

    // 维度列表
    const modelDemisionList = ref()

    const inputValue = ref()

    const props = defineProps({
        metricsDetailData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })

    // 第一次进入页面的时候 
    const getModelList = async () => {
        const {code, data} = await API.dataModel.getGetModelList({})
        if (code === 200) {
            const modelId = reactive<any>(props.metricsDetailData?.modelId)
            modelOptions.value = data?.map((item)=>{
                return {
                    label: item.modelName,
                    value: item.id,
                    modelDesc: item.modelDesc,
                    tableName: item.tableName,
                    updateType: item.updateType
                }
            })
            // 是否编辑
            if (id.value) {
                let getInitModel = modelOptions.value?.filter((item:any) => item.value === modelId)[0]
                
                modelValue.value = getInitModel?.value
            } else {
                modelValue.value = modelOptions.value[0]?.value
            }
            getInitModal()
        }
    }
    const getDimensionList = async (query:any) => {
        const {code, data} = await API.dataModel.postGetModelTableColumn({
            ...query
        })
        if (code === 200) {
            modelDemisionList.value = data
        }
    }
    // 维度搜索过滤
    const handleFilteDimension = () => {
        const params = {
            columnName: inputValue.value,
            modelId: modelValue.value
        }
        getDimensionList(params)
    }

    const getInitModal = () => {
        const params = {
            columnName: inputValue.value,
            modelId: modelValue.value
        }
        const getChangeModel = modelOptions.value.filter((item:any) => item.value === modelValue.value)[0]
        store.commit('metricsdevelop/setDataModelId', getChangeModel?.value)
        store.commit('metricsdevelop/setFactTableName', getChangeModel?.tableName)
        
        getDimensionList(params)
    }
    // 切换数据模型的时候重新获取维度列表
    const handleChooseModel = async () => {
        const params = {
            columnName: '',
            modelId: modelValue.value
        }
        const {code, data, msg} = await API.dataModel.postGetModelTableColumn({
            ...params
        })
        if (code === 200) {
            
            modelDemisionList.value = data?.map((itme:any)=> {

                Object.keys(itme).forEach(s => {
                    if (!itme[s] && s != 'ifBindDimension' && s != 'ifPartition' && s != 'ifPrimaryKey'){
                        itme[s] = '--'
                    } 
                })
                return {
                    ...itme
                }
            })
            const getChangeModel = modelOptions.value.filter((item:any) => item.value === modelValue.value)[0]
            store.commit('metricsdevelop/setDataModelId', getChangeModel?.value)
            store.commit('metricsdevelop/setFactTableName', getChangeModel?.tableName)
            Bus.emit('changeDataModal')
        } else {
            Message.warning(msg)
        }
    }
    watch(
        () => props.metricsDetailData,
        (val) => {
            if (val?.modelId) {
                getModelList()
            }
        }
    )
    onMounted(() => {
        if (!id.value) {
            getModelList()
        }
    })

    const modal_type = {
        1:'全量',
        2: '增量',
        3: '拉链'
    }

</script>

<template>
    <div class="data-model">
        <div class="fw data-model_title col_333">
            数据模型
        </div>
        <div class="data-model_select">
            <a-select 
                class="extra-select"
                v-model="modelValue" 
                :style="{width:'100%'}" 
                :options="modelOptions"
                @change="handleChooseModel"
                :disabled="status===1 || status==='1'"
                unmountOnClose>
                <div class="alert-tips">
                    <icon-info-circle />
                    <span>切换模型将清空当前所有配置</span>
                </div>
                <template #arrow-icon>
                    <icon-caret-down />
                </template>
                <template #label="{data}">
                    <span>{{data?.label}}</span>
                    
                    <span class="extra-tips">{{modal_type[data?.updateType]}}</span>
                </template>
            </a-select>
            
        </div>
        <div class="data-model_list">
            <div class="data-model_list-search">
                <a-input-search 
                    :style="{width:'100%'}" 
                    placeholder="请输入"
                    v-model="inputValue"
                    @search="() => {
                        handleFilteDimension()
                    }"
                    @pressEnter="() => {
                        handleFilteDimension()
                    }"
                />
            </div>
            <draggable
                class="condition-drag"
                :list="modelDemisionList"
                 :group="{name: 'modelList', pull: 'clone'}"
                :sort='false' 
                chosen-class="chosenClass"
                animation="300"
                item-key="id"
                drag-class="drag-item-bg"
            >
                <template #item="{element}">

                    <div>
                        <a-popover position="rt"
                            
                             arrowClass="arrowClass" class="self-defined-popover-contents">
                            <div class="drag-index">
                                <model-list-li :model-item="element"></model-list-li> 
                            </div>
                            <template #content>
                                    <div class="popver-tip">
                                        <div class="popver-tip-title">{{element?.tableFieldName}}</div>
                                        <div class="popver-tip-content">
                                            <div class="tips-item">
                                                <span>数据类型：</span>
                                                <span>{{element?.tableFieldType}}</span>
                                            </div>
                                            <div class="tips-item">
                                                <span>字段注释：</span>
                                                <span>{{element?.tableFieldDesc}}</span>
                                            </div>
                                            <div class="tips-item">
                                                <span>关联维度：</span>
                                                <span>{{element?.dimensionName}}</span>
                                            </div>
                                        </div>
                                    </div>
                            </template>
                        </a-popover>
                    </div>
                </template>
            </draggable>
        </div>
    </div>
</template>
<style lang="scss">
.self-defined-popover-contents {
    .arco-popover-popup-content {
        padding: 0;
        margin: 0;
        .popver-tip {
            &-title {
                padding: 6px 10px;
                border-bottom: 1px solid #e8ebf2;
            }
            &-content {
                padding: 6px 10px;
                .tips-item {
                    >span {
                        font-family: PingFangSC-Regular;
                        font-size: 12px;
                        color: #60646F;
                        letter-spacing: 0;
                        line-height:24px;
                        font-weight: 400;
                    }
                    >span:first-child{
                        color: #60646F;
                    }
                    >span:last-child {
                        color: #33353b;
                    }
                }
            }
        } 
    }
    .arco-popover-popup-arrow {
        width: 4px;
    } 
    .arrowClass {
        width: 10px;
        height: 10px;
    }
}
</style>
<style lang="scss" scoped>
    .chosenClass {
        background: #F0F6FF;
        border: 1px solid #628CFF !important;
        border-radius: 3px;
        // height: 60px;
        width: 100%;
    }
    .drag-item-bg {
        background: #F0F6FF;
        border: 1px solid #628CFF !important;
        border-radius: 3px;
        width: 70%;
    }
    
    @import './index.scss'
</style>